<template>
  <van-row justify="center">
    <van-image :src="user?.avatarUrl" round width="86" height="86"/>
  </van-row>
  <van-cell-group inset style="margin-top: 10px">
    <van-cell icon="contact" title="昵称" :value="user?.username"/>
    <van-cell title="标签">
      <template #value>
        <van-tag v-if="user?.tags" v-for="tag in user?.tags" plain type="danger"
                 style="margin-right: 8px">
          {{ tag }}
        </van-tag>
        <span v-else>他太懒了，暂无标签</span>
      </template>
      <template #icon>
        <van-icon class-prefix="shier-icon" name="biaoqianguanli" style="margin-right: 5px;color: #0084ff"/>
      </template>
    </van-cell>
    <van-cell title="简介">
      <template #value>
        <van-text-ellipsis :content="user?.profile || '他太懒了，暂无简介'"/>
      </template>
      <template #icon>
        <van-icon class-prefix="shier-icon" name="qianming" style="margin-left: 5px;right: 5px;color: #ff0000"/>
      </template>
    </van-cell>
    <van-cell icon-prefix="shier-icon" icon="nan" title="性别">
      <span v-if="user?.gender===1">男</span>
      <span v-if="user?.gender===0">女</span>
      <span v-if="user?.gender===2">保密</span>
    </van-cell>
    <van-cell icon="phone-o" title="电话" :value="user?.phone"/>
    <van-cell title="邮箱" :value="user?.email || '他太懒了，暂无邮箱'">
      <template #icon>
        <van-icon class-prefix="shier-icon" name="youxiang"
                  style="margin-right: 5px;color: #0084ff"/>
      </template>
    </van-cell>
  </van-cell-group>
  <div style="margin: 16px">
    <div v-if="user?.id !== currentUser?.id">
      <div v-if="!isFriend">
      <van-button style="width: 80%;margin-left: 40px;margin-top: 10px" plain round type="primary" @click="addFriends(user.id)">
        添加好友
      </van-button>
      </div>
      <div v-else>
        <van-button style="width: 80%;margin-left: 40px;margin-top: 10px" round type="primary" @click="toChat">
          私聊
        </van-button>
        <van-button style="width: 80%;margin-left: 40px;margin-top: 10px"  round type="danger" @click="deleteFriends" >
          删除好友
        </van-button>

      </div>
    </div>

  </div>

</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";

import {getCurrentUser} from "../../services/user.ts";
import myAxios from "../../plugins/myAxios.ts";
import {Toast} from "@vant/compat";

let route = useRoute()
const user = ref()
const isFriend = ref(true)
const currentUser = ref()
const id=route.query.id
onMounted(async () => {
  currentUser.value = await getCurrentUser();


  let res = await myAxios.get("/user/" + route.query.id);
  if (res?.code === 0) {
    if (res.data.tags) {
      res.data.tags = JSON.parse(res.data.tags)
    }
    user.value=res.data
  }
  let res_ = await myAxios.get("/friend/isFriend",{
    params: {
      id
    },
  });
  if(res_?.data!==true){
    isFriend.value=false;
  }
})

const router = useRouter();
const toChat = () => {
  router.push({
    path: "/chat",
    query: {
      toUserId: user.value.id,
      receiveType: 0,
      status: 0
    }
  })
}

/**
 * 显示弹窗
 */
const addFriends = (id) => {
 const status=myAxios.post("friend/add", {
   id:id
 })
  if(status){
    window.location.reload()
  }else{
    Toast.fail("添加失败")
  }
}
const deleteFriends=()=>{
  const status = myAxios.get("/friend/delete", {
    params:{
      id
    },
  })
  if (status) {
    window.location.reload()
  }else{
    Toast.fail("删除失败")
  }
}
</script>

<style scoped>

</style>